import { useEffect, useState } from "react"
import { getBillData } from "@/request/api"
import type { ColumnsType } from 'antd/es/table'
import { Table, Input } from 'antd'
const { Search } = Input;

const BillView:React.FC = () => {

  const [pageSize] = useState(7);
  const [billData, setBillData] = useState([]);
  const [totle, setTotle] = useState(1)
  const [temp, setTemp] = useState("") //搜索

  useEffect(() => {
    getData()
  }, [])

  const getData = async (pageNum: number = 1, search:string = "") => {
    const {data, code } = await getBillData({ pageNum, pageSize, search })
    if(code == 0) {
      setTotle(data.total)
      setBillData(data.records)
    }
  }

  const columns: ColumnsType<checkOutReq> = [
    {
      title: '编号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '姓名',
      dataIndex: 'customerName',
      key: 'customerName',
    },
    {
      title: '电话',
      dataIndex: 'customerPhone',
      key: 'customerPhone',
    },
    {
      title: '身份证号码',
      key: 'customerCardId',
      dataIndex: 'customerCardId',
    },
    {
      title: '入住时间',
      key: 'beginDate',
      dataIndex: 'beginDate',
    },
    {
      title: '退房时间',
      key: 'endDate',
      dataIndex: 'endDate',
    },
    {
      title: '房号',
      key: 'roomId',
      dataIndex: 'roomId',
    },
    {
      title: '总价',
      key: 'totalAmount',
      dataIndex: 'totalAmount',
    },
    {
      title: '结账时间',
      key: 'createdDate',
      dataIndex: 'createdDate',
    },
    {
      title: '操作人',
      key: 'operator',
      dataIndex: 'operator',
    }
  ]

  const onSearch = (value:string) => {
    setTemp(value)
    getData(1, value)
  } 

  return (
    <>
    <div style={{width: '300px', margin: '20px 20px 20px 0'}}>
        <Search placeholder="请输入预定的客户姓名" onSearch={onSearch} enterButton allowClear/>
      </div>
      <Table columns={columns} dataSource={billData} rowKey="id" pagination={
        {
          total: totle,//数据的总条数
          defaultCurrent: 1,//默认当前的页数
          defaultPageSize: pageSize,//默认每页的条数
          onChange: (page: number) => getData(page, temp)
        }
      } />
    </>
  )
}

export default BillView